<template>
  <div class="content">
    <div class="fixinfo">
      <div class="fixa">
        <div
          class="fixcon"
          v-for="(data, index) in eightGreatnum"
          :key="index"
          @click="getdataList(data.tagId, data.tagName)"
        >
          <span style="font-size:20px">{{ data.tagName }}</span>
          <div style="font-size:20px">{{ data.zongshu }}</div>
        </div>
      </div>
    </div>
    <div class="fixbot">
      <div id="fixmap" class="fixmap" ref="fixmap"></div>
      <div class="fixmassge">
        <div class="fixmassfegecon">
          <div class="selectCityName">{{selectCityName}}</div>
          <div class="wraptit">
              <span style="font-size:18px">企业名称</span><span style="font-size:18px">标题</span><span style="font-size:18px">状态</span>
            </div>
          <img src="../../assets/bj-1.png" alt="" class="bj-1" />
          <img src="../../assets/bj-2.png" alt="" class="bj-2" />
          <img src="../../assets/bj-3.png" alt="" class="bj-3" />
          <img src="../../assets/bj-4.png" alt="" class="bj-4" />
          <div class="noscroll" v-if="bisList.length > 0">
            <li v-for="(item, i) in bisList" :key="i" :id="i">
              <p>
                    <span style="font-size:18px">{{ item.corpName }}</span>
                    <span style="font-size:18px">{{ item.title }}</span>

                    <span style="font-size:18px" :class="[item.status=='已办结'?'qq':'',item.status=='处理中'?'ww':'',item.status=='已提交'?'ww':'',item.status=='待提交'?'ww':'',item.status=='已退回'?'ww':'']">{{ item.status }}</span>
                </p>
            </li>
          </div>
          <div class="zanwu" v-else>
              暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import user from "../../plugins/user";
import vueSeamlessScroll from "../../../node_modules/vue-seamless-scroll";

export default {
  name: "fixtop",

  props: {
    eightGreatnum: {
      type: Array,
      default: () => [],
    },
    year: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      list: [],
      bisList: [],
      selectCityName:''
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionSetting() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        autoPlay: true, // 是否自动滚动
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        openTouch: true,
      };
    },
  },
  methods: {
    // initData是子组件中用到（从父组件传递到子组件）数据的方法

    initData() {
      this.getdataList(
        this.eightGreatnum[0].tagId,
        this.eightGreatnum[0].tagName
      );
    },
    map(maplist, tagId, tagName) {
      this.selectCityName = tagName;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#fixmap")) || this.$echarts.init(this.$refs.fixmap);
        var mpaValue = [];
        var allCity = [
          { name: "南宁市" },
          { name: "崇左市" },
          { name: "柳州市" },
          { name: "来宾市" },
          { name: "桂林市" },
          { name: "梧州市" },
          { name: "贺州市" },
          { name: "玉林市" },
          { name: "贵港市" },
          { name: "百色市" },
          { name: "钦州市" },
          { name: "河池市" },
          { name: "北海市" },
          { name: "防城港市" },
        ];
        let diffCity = allCity.filter((v) => {
          return maplist.every((e) => e.name != v.name);
        });
        if (diffCity.length) {
          diffCity.forEach((item) => {
            item.zongshu = 0;
          });
        }
        maplist = [...maplist, ...diffCity];
        let sortarr = [];
        maplist.forEach((item) => {
          sortarr.push(item.zongshu);
        });

        sortarr.sort(function (a, b) {
          return a - b;
        });
        let sortmax
        if (tagId != undefined) {
             sortmax= sortarr[sortarr.length - 1];
        }
        maplist.forEach((item) => {
          if (+item.zongshu <= Number(sortmax) / 3) {
            item.mColor = "#4fe891";
          } else if (
            +item.zongshu <=
            Number(sortmax) / 3 + Number(sortmax) / 3
          ) {
            item.mColor = "#e3d060";
          } else if (+item.zongshu <= Number(sortmax)) {
            item.mColor = "#f35a5a"; //yellow
          }
        });
        var mapColor = [];
        maplist.forEach((item) => {
          mapColor.push({
            name: item.name, //与china.js对应的省份名称
            itemStyle: {
              areaColor: item.mColor, //省份背景色
            },
          });
        });
        var nameColor = " rgb(55, 75, 113)";
        var name_fontFamily = "宋体";
        var name_fontSize = 35;
        var mapName = "china";
        var data = [];
        var geoCoordMap = {};
        var toolTipData = [];

        /*获取地图数据*/
        myChart.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        myChart.hideLoading();
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
          data.push({
            name: name,
          });

          let valueMap;
          for (let index = 0; index < maplist.length; index++) {
            let item = maplist[index];
            if (name == item.name) {
              valueMap = item.zongshu;
              break;
            }
          }
          // console.log(valueMap,'valueMap');
          toolTipData.push({
            name: name,
            value: [
              {
                name: tagName + "事项",
                value: valueMap,
              },
            ],
          });
        });

        var max = 480,
          min = 9; // todo
        var maxSize4Pin = 50,
          minSize4Pin = 20;

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };

        var option = {
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              if (typeof params.value[2] == "undefined") {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }

                return toolTiphtml;
              } else {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }
                return toolTiphtml;
              }
            },
          },
           title: {
            text: tagName+"事项数量",
            x: "left",
            y: "76%",

            textStyle: {
              fontSize: 14,
              color: "#fff",
              fontWeight: "normal",
            },
          },
          dataRange: {
            x: "left",
            y: "80%",
            splitList: [
              { start: (Number(sortmax)/3 + Number(sortmax)/3), end: Number(sortmax) },
              { start: (Number(sortmax)/3), end: (Number(sortmax)/3 + Number(sortmax)/3) },
              { start: 0, end: (Number(sortmax)/3) },
            ],
            color: ["#f35a5a","#e3d060","#4fe891", ],
            textStyle: {
              color: "#fff",
            },
          },

          legend: {
            orient: "vertical",
            y: "bottom",
            x: "right",
            data: ["credit_pm2.5"],
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            show: false,
            min: 0,
            max: 600,
            left: "left",
            top: "bottom",
            text: ["高", "低"], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
              // color: ['#3B5077', '#031525'] // 蓝黑
              // color: ['#ffc0cb', '#800080'] // 红紫
              // color: ['#3C3B3F', '#605C3C'] // 黑绿
              //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
              // color: ['#23074d', '#cc5333'] // 紫红
              //   color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#1488CC', '#2B32B2'] // 浅蓝
              // color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              color: ["#22e5e8", "#0035f9", "#22e5e8"], // 蓝绿
            },
          },
          /*工具按钮组*/
          toolbox: {
            show: false,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              dataView: {
                readOnly: false,
              },
              restore: {},
              saveAsImage: {},
            },
          },
          geo: {
            zoom: 3, //大小
            left: "95%", //位置
            top: 320,

            show: true,
            map: mapName,
            label: {
              normal: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                show: false,
              },
            },
            roam: true,
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
              ...mapColor
            ],
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#097bba",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
          },
          series: [
            {
              name: "散点",
              type: "scatter",
              geoIndex: 0,
              coordinateSystem: "geo",
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0.8)",
                },
              },
            },
            {
              type: "map",
              map: mapName,
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#031525",
                  borderColor: "#3B5077",
                },
                emphasis: {
                  areaColor: "#2B91B7",
                },
              },
              animation: false,
              data: data,
              // data: ['南宁市','崇左市','柳州市','来宾市','桂林市','梧州市','贺州市','玉林市','贵港市','百色市','钦州市','河池市','北海市','防城港市']
            },
            {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin", //气泡
              symbolSize: function (val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a * min;
                b = maxSize4Pin - a * max;
                return a * val[2] + b;
              },
              label: {
                normal: {
                  show: false,
                  formatter: function (params) {
                    return params.data.value[2];
                  },
                  textStyle: {
                    color: "#fff",
                    fontSize: 9,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0)", //标志颜色
                },
              },
              zlevel: 6,
              data: convertData(data),
            },
            {
              name: "Top 5",
              type: "effectScatter",
              coordinateSystem: "geo",
              data: convertData(
                data
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 5)
              ),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0.8)",
                  shadowBlur: 10,
                  shadowColor: "#05C3F9",
                },
              },
              zlevel: 1,
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.off('click')
        myChart.on("click", (params) => {
          if (tagId) {
            var con = {};
            con.tagId = tagId;
            maplist.forEach((item) => {
              if (params.name == item.name) {
                con.areaId = item.areaId;
                this.selectCityName = item.name
              }
            });
            this.getbunessdata(con);
          }
        });

        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    async getdataList(params, name) {
      console.log('getdataList',this.year)
      await user.statisticsdata(params,this.year).then((res) => {
        var aId = res.data[0].areaId;
        this.list = res.data;
        let form = {
          areaId: aId,
          tagId: params,
        };
        this.map(this.list, form.tagId, res.data[0].name);
        this.getbunessdata(form);
      });
    },
    async getbunessdata(form) {
      console.log('getbunessdata',this.year)
      user.businessdata(form,this.year).then((res) => {
        this.bisList = res.data;
        if(res.data.length > 0){
        this.bisList.forEach((item) => {
        switch (item.status) {
          case 1:
            item.status = "待提交";
            break;
          case 2:
            item.status = "已提交";
            break;
          case 3:
            item.status = "已退回";
            break;
          case 4:
            item.status = "处理中";
            break;
          default:
            item.status = "已办结";
            break;
        }
      });
      }
      });
    },
  },
  created() {
    this.getdataList();
    // this.getdataList();
  },
};
</script>
<style lang="scss" scoped>
.qq{
  color: rgb(86, 229, 86) !important;
}
.ww{
  color: yellow !important;
}
.ee{
  color: #f52929 !important;
}
.content {
  width: 100%;
  min-width: 70%;
  height: 100%;
  .fixinfo {
    width: 100%;
    height: 15vh;
    overflow-x: scroll;
    border-bottom: 2px solid #0089ff;

    .fixa {
      display: flex;
      align-items: center;
      height: 14vh;

      white-space: nowrap;
      .fixcon {
        min-width: 120px;
        height: 80%;
        // background: red;
        margin: 0 5px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        span {
          display: block;
          text-align: center;
          color: white;
          // font-size: 16px;
          font-size: 14px;
        }
        div {
          width: 60px;
          height: 60px;
          // background: rebeccapurple;
          margin: 0 auto;
          margin-top: 15px;
          border-radius: 50%;
          text-align: center;
          line-height: 60px;
          border: 5px solid #50ceff;
          color: white;
        }
      }
    }
  }
  .fixinfo::-webkit-scrollbar {
    height: 8px;
  }
  .fixinfo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #0089ff;
    background: #0089ff;
  }
  .fixinfo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(72, 45, 221, 0.2);
    border-radius: 10px;
    background: rgba(32, 6, 177, 0.2);
    /* border: none;
	background: none; */
  }

  .fixbot {
    width: 100%;
    height: 70vh;
    display: flex;
    .fixmap {
      width: 43%;
      height: 95%;
      padding: 15px;
      // background: red;
    }
    .fixmassge {
      width: 57%;
      height: 100%;
      .fixmassfegecon {
        margin: 10px;
        width: 37vw;
        height: 63vh;
        border: 1px solid #20558b;
        padding: 1vw;
        position: relative;

        h3 {
          font-size: 24px;
          color: white;
          border-bottom: 2px solid #0089ff;
        }
        .wraptit{
          display: flex;
          font-size: 16px;
          border-bottom: 2px solid #0089ff;
          padding-bottom: 5px;

            span{
              text-shadow: 0 0 white;
              &:nth-of-type(1){
                display: block;
                width: 40%;
                 color: #0089FF;
              }
               &:nth-of-type(2){
                display: block;
                  width: 44%;
                 color: #0089FF;
                 margin-left: 2px;
              }
               &:nth-of-type(3){
                display: block;
                 margin-left: 2px;

                width: 12%;
                 color: #0089FF;
              }
            }
        }

        .bj-1 {
          position: absolute;
          left: -1px;
          top: -1px;
        }
        .bj-2 {
          position: absolute;
          right: -1px;
          top: -1px;
        }
        .bj-3 {
          position: absolute;
          right: -1px;
          bottom: -1px;
        }
        .bj-4 {
          position: absolute;
          left: -1px;
          bottom: -1px;
        }
        .zanwu{
          width: 100%;
          height: 60px;
          text-align: center;
          font-size: 20px;
          color:white;
          line-height: 60px;
        }
        .noscroll{
            height: 90%;
            overflow: hidden;
            margin-top: 10px;
            overflow-y: auto;
            li {
            width: 100%;
            // height: 35px;
            list-style: none;
            // white-space: nowrap;
            // overflow: hidden;
            margin-bottom: 10px;
            text-overflow: ellipsis;
            border-bottom: 1px solid #445a6e85;

            color: white;
            p{
              display: flex;
            margin-bottom: 5px;

              span{
                  &:nth-of-type(1){
                display: block;
                width: 40%;
              }
               &:nth-of-type(2){
                display: block;
                  width: 44%;
                 margin-left: 2px;
              }
               &:nth-of-type(3){
                display: block;
                 margin-left: 2px;

                width: 12%;
              }
              }
            }
          }

        }
          .noscroll::-webkit-scrollbar{
                height: 8px;
              }
              .noscroll::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    -webkit-box-shadow: inset 0 0 5px #0089FF;
                    background: #0089FF;
                }
              .noscroll::-webkit-scrollbar-track {

              -webkit-box-shadow: inset 0 0 5px rgba(72, 45, 221, 0.2);
              border-radius: 10px;
              background: rgba(32, 6, 177, 0.2);
              /* border: none;
              background: none; */
                }

        .seamless-warp {
          height: 90%;
          overflow: hidden;
          margin-top: 10px;
          li {
            width: 100%;
            height: 35px;
            list-style: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: white;
          }
        }
      }
    }
  }
}
.selectCityName{
  color:white;
  font-size: 20px;
}
</style>
